<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-massage-show
  [guild_link]="'alert.help.notice.link' | i18n"
  [help_massage_content]="'alert.help.notice' | i18n"
  [icon_name]="'notification'"
  [module_name]="'menu.alert.dispatch'"
></app-help-massage-show>
<nz-divider></nz-divider>
<nz-tabset nzSize="large">
  <nz-tab [nzTitle]="'alert.notice.receiver' | i18n">
    <div style="margin-bottom: 20px">
      <button (click)="syncReceiver()" nz-button nzType="primary">
        <i nz-icon nzTheme="outline" nzType="sync"></i>
        {{ 'common.refresh' | i18n }}
      </button>

      <button (click)="onNewNoticeReceiver()" nz-button nzType="primary">
        <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
        {{ 'alert.notice.receiver.new' | i18n }}
      </button>
    </div>
    <nz-table
      #fixedTable
      [nzData]="receivers"
      [nzLoading]="receiverTableLoading"
      [nzScroll]="{ x: '1240px', y: '100%' }"
      nzFrontPagination="false"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="15%">{{ 'alert.notice.receiver.people' | i18n }}</th>
          <th nzAlign="center" nzWidth="20%">{{ 'alert.notice.receiver.type' | i18n }}</th>
          <th nzAlign="center" nzWidth="20%">{{ 'alert.notice.receiver.setting' | i18n }}</th>
          <th nzAlign="center" nzWidth="20%">{{ 'common.edit-time' | i18n }}</th>
          <th nzAlign="center" nzWidth="25%">{{ 'common.edit' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of fixedTable.data">
          <td nzAlign="center">
            <span>{{ data.name }}</span>
          </td>
          <td nzAlign="center">
            <nz-tag *ngIf="data.type == 0" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.sms' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 1" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.email' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 2" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>WebHook</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 3" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.wechat' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 4" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.wework' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 5" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.ding' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 6" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.fei-shu' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 7" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.telegram-bot' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 8" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.slack' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 9" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.discord' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 10" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.weChatApp' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 11" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.smn' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 12" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.serverchan' | i18n }}</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 13" nzColor="orange">
              <i nz-icon nzTheme="outline" nzType="notification"></i>
              <span>{{ 'alert.notice.type.gotify' | i18n }}</span>
            </nz-tag>
          </td>
          <td nzAlign="center">
            <span *ngIf="data.type == 0">{{ data.phone }}</span>
            <span *ngIf="data.type == 1">{{ data.email }}</span>
            <span *ngIf="data.type == 2">{{ data.hookUrl }}</span>
            <span *ngIf="data.type == 3">{{ data.wechatId }}</span>
            <span *ngIf="data.type == 4">{{ data.wechatId }}</span>
            <span *ngIf="data.type == 5">{{ data.accessToken }}</span>
            <span *ngIf="data.type == 6">{{ data.wechatId }}</span>
            <span *ngIf="data.type == 7">{{ data.tgBotToken }}<br />{{ data.tgUserId }}</span>
            <span *ngIf="data.type == 8">{{ data.slackWebHookUrl }}</span>
            <span *ngIf="data.type == 9">{{ data.discordChannelId }}<br />{{ data.discordBotToken }}</span>
            <span *ngIf="data.type == 10">{{ data.corpId }}<br />{{ data.agentId }}<br />{{ data.appSecret }}</span>
            <span *ngIf="data.type == 11">{{ data.smnAk }}</span>
            <span *ngIf="data.type == 12">{{ data.serverChanToken }}</span>
            <span *ngIf="data.type == 13">{{ data.gotifyToken }}</span>
          </td>
          <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
          <td nzAlign="center">
            <button
              (click)="onEditOneNoticeReceiver(data)"
              [nzTooltipTitle]="'alert.notice.receiver.edit' | i18n"
              nz-button
              nz-tooltip
              nzType="primary"
            >
              <i nz-icon nzTheme="outline" nzType="edit"></i>
            </button>
            <button
              (click)="onDeleteOneNoticeReceiver(data.id)"
              [nzTooltipTitle]="'alert.notice.receiver.delete' | i18n"
              nz-button
              nz-tooltip
              nzDanger
              nzType="primary"
            >
              <i nz-icon nzTheme="outline" nzType="delete"></i>
            </button>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-tab>
  <nz-tab [nzTitle]="'alert.notice.rule' | i18n">
    <div style="margin-bottom: 20px">
      <button (click)="syncRule()" nz-button nzType="primary">
        <i nz-icon nzTheme="outline" nzType="sync"></i>
        {{ 'common.refresh' | i18n }}
      </button>

      <button (click)="onNewNoticeRule()" nz-button nzType="primary">
        <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
        {{ 'alert.notice.rule.new' | i18n }}
      </button>
    </div>

    <nz-table
      #ruleFixedTable
      [nzData]="rules"
      [nzLoading]="ruleTableLoading"
      [nzScroll]="{ x: '1240px', y: '100%' }"
      nzFrontPagination="false"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="15%">{{ 'alert.notice.rule.name' | i18n }}</th>
          <th nzAlign="center" nzWidth="15%">{{ 'alert.notice.receiver.people' | i18n }}</th>
          <th nzAlign="center" nzWidth="15%">{{ 'alert.notice.template.name' | i18n }}</th>
          <th nzAlign="center" nzWidth="10%">{{ 'alert.notice.rule.all' | i18n }}</th>
          <th nzAlign="center" nzWidth="10%">{{ 'alert.notice.rule.enable' | i18n }}</th>
          <th nzAlign="center" nzWidth="15%">{{ 'common.edit-time' | i18n }}</th>
          <th nzAlign="center" nzWidth="20%">{{ 'common.edit' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of ruleFixedTable.data">
          <td nzAlign="center">
            <span>{{ data.name }}</span>
          </td>
          <td nzAlign="center">
            <span>{{ data.receiverName }}</span>
          </td>
          <td nzAlign="center">
            <span *ngIf="data.templateId">{{ data.templateName }}</span>
            <nz-tag *ngIf="!data.templateId" nzColor="default">
              <span>{{ 'alert.notice.template.preset.true' | i18n }}</span>
            </nz-tag>
          </td>
          <td nzAlign="center">
            <nz-switch [(ngModel)]="data.filterAll" (ngModelChange)="updateNoticeRule(data)"></nz-switch>
          </td>
          <td nzAlign="center">
            <nz-switch [(ngModel)]="data.enable" (ngModelChange)="updateNoticeRule(data)"></nz-switch>
          </td>
          <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
          <td nzAlign="center">
            <button
              (click)="onEditOneNoticeRule(data)"
              [nzTooltipTitle]="'alert.notice.rule.edit' | i18n"
              nz-button
              nz-tooltip
              nzType="primary"
            >
              <i nz-icon nzTheme="outline" nzType="edit"></i>
            </button>
            <button
              (click)="onDeleteOneNoticeRule(data.id)"
              [nzTooltipTitle]="'alert.notice.rule.delete' | i18n"
              nz-button
              nz-tooltip
              nzDanger
              nzType="primary"
            >
              <i nz-icon nzTheme="outline" nzType="delete"></i>
            </button>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-tab>
  <nz-tab [nzTitle]="'alert.notice.template' | i18n">
    <div style="margin-bottom: 20px">
      <button (click)="syncTemplate()" nz-button nzType="primary">
        <i nz-icon nzTheme="outline" nzType="sync"></i>
        {{ 'common.refresh' | i18n }}
      </button>
      <button (click)="onNewNoticeTemplate()" nz-button nzType="primary">
        <i nz-icon nzTheme="outline" nzType="appstore-add"></i>
        {{ 'alert.notice.template.new' | i18n }}
      </button>
    </div>
    <nz-table
      #templateFixedTable
      [nzData]="templates"
      [nzLoading]="templateTableLoading"
      [nzScroll]="{ x: '1240px', y: '100%' }"
      nzFrontPagination="false"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="25%">{{ 'alert.notice.template.name' | i18n }}</th>
          <th nzAlign="center" nzWidth="15%">{{ 'alert.notice.template.type' | i18n }}</th>
          <th nzAlign="center" nzWidth="15%">{{ 'alert.notice.template.preset' | i18n }}</th>
          <th nzAlign="center" nzWidth="20%">{{ 'common.edit-time' | i18n }}</th>
          <th nzAlign="center" nzWidth="15%">{{ 'common.edit' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of templateFixedTable.data">
          <td nzAlign="center">
            <span>{{ data.name }}</span>
          </td>
          <td nzAlign="center">
            <span>
              <nz-tag *ngIf="data.type == 0" nzColor="orange">
                <span>{{ 'alert.notice.type.sms' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 1" nzColor="orange">
                <span>{{ 'alert.notice.type.email' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 2" nzColor="orange">
                <span>WebHook</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 3" nzColor="orange">
                <span>{{ 'alert.notice.type.wechat' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 4" nzColor="orange">
                <span>{{ 'alert.notice.type.wework' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 5" nzColor="orange">
                <span>{{ 'alert.notice.type.ding' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 6" nzColor="orange">
                <span>{{ 'alert.notice.type.fei-shu' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 7" nzColor="orange">
                <span>{{ 'alert.notice.type.telegram' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 8" nzColor="orange">
                <span>{{ 'alert.notice.type.slack' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 9" nzColor="orange">
                <span>{{ 'alert.notice.type.discord' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 10" nzColor="orange">
                <span>{{ 'alert.notice.type.weChatApp' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 11" nzColor="orange">
                <span>{{ 'alert.notice.type.smn' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 12" nzColor="orange">
                <span>{{ 'alert.notice.type.serverchan' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="data.type == 13" nzColor="orange">
                <span>{{ 'alert.notice.type.gotify' | i18n }}</span>
              </nz-tag>
            </span>
          </td>
          <td nzAlign="center">
            <span>
              <nz-tag *ngIf="data.preset" nzColor="default">
                <span>{{ 'alert.notice.template.preset.true' | i18n }}</span>
              </nz-tag>
              <nz-tag *ngIf="!data.preset" nzColor="orange">
                <span>{{ 'alert.notice.template.preset.false' | i18n }}</span>
              </nz-tag>
            </span>
          </td>
          <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
          <td nzAlign="center">
            <span *ngIf="!data.preset">
              <button
                (click)="onEditOneNoticeTemplate(data)"
                [nzTooltipTitle]="'alert.notice.template.edit' | i18n"
                nz-button
                nz-tooltip
                nzType="primary"
              >
                <i nz-icon nzTheme="outline" nzType="edit"></i>
              </button>
              <button
                (click)="onDeleteOneNoticeTemplate(data.id)"
                [nzTooltipTitle]="'alert.notice.template.delete' | i18n"
                nz-button
                nz-tooltip
                nzDanger
                nzType="primary"
              >
                <i nz-icon nzTheme="outline" nzType="delete"></i>
              </button>
            </span>
            <span *ngIf="data.preset">
              <button
                (click)="onShowOneNoticeTemplate(data)"
                [nzTooltipTitle]="'alert.notice.template.show' | i18n"
                nz-button
                nz-tooltip
                nzType="primary"
              >
                <i nz-icon nzTheme="outline" nzType="eye"></i>
              </button>
            </span>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-tab>
</nz-tabset>

<!-- 新增或修改通知策略弹出框 -->
<nz-modal
  (nzOnCancel)="onManageRuleModalCancel()"
  (nzOnOk)="onManageRuleModalOk()"
  [(nzVisible)]="isManageRuleModalVisible"
  [nzOkLoading]="isManageRuleModalOkLoading"
  [nzTitle]="isManageRuleModalAdd ? ('alert.notice.rule.new' | i18n) : ('alert.notice.rule.edit' | i18n)"
  nzMaskClosable="false"
  nzWidth="40%"
>
  <div *nzModalContent class="-inner-content">
    <form #ruleForm="ngForm" nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="rule_name" nzRequired="true">{{ 'alert.notice.rule.name' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="rule.name" id="rule_name" name="rule_name" nz-input required type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="receiver" nzRequired="true" nzSpan="7">{{ 'alert.notice.receiver.people' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" nzSpan="12">
          <nz-select
            (nzOpenChange)="loadReceiversOption()"
            [(ngModel)]="rule.receiverId"
            (ngModelChange)="onSwitchReceiver()"
            [nzOptions]="receiversOption"
            nzMode="multiple"
            id="receiver"
            name="receiver"
            nzPlaceHolder="Select a receiver"
            nzShowSearch
            required
          >
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="templates" nzRequired="false" nzSpan="7">{{ 'alert.notice.template' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-select
            (nzOpenChange)="loadTemplatesOption()"
            [(ngModel)]="rule.templateId"
            [nzOptions]="templatesOption"
            id="templates"
            name="templates"
            nzPlaceHolder="Select a template"
            nzShowSearch
            nzAllowClear
          >
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="filterAll" nzRequired="true" nzSpan="7">{{ 'alert.notice.rule.all' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch [(ngModel)]="rule.filterAll" id="filterAll" name="filterAll"></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="!rule.filterAll">
        <nz-form-label nzFor="tags" nzSpan="7">{{ 'alert.notice.rule.tag' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-select
            (nzOpenChange)="loadTagsOption()"
            [(ngModel)]="filterTags"
            [nzDisabled]="rule.filterAll"
            [nzMaxTagCount]="5"
            [nzOptions]="tagsOption"
            id="tags"
            name="tags"
            nzAllowClear
            nzMode="multiple"
            nzPlaceHolder="Select Tags"
            nzShowSearch
            required
          >
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="!rule.filterAll">
        <nz-form-label nzFor="priorities" nzSpan="7">{{ 'alert.notice.rule.priority' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-select
            (ngModelChange)="onPrioritiesChange()"
            [(ngModel)]="rule.priorities"
            [nzDisabled]="rule.filterAll"
            id="priorities"
            name="priorities"
            nzAllowClear
            nzMode="multiple"
            nzPlaceHolder="Select Priorities"
            nzShowSearch
            required
          >
            <nz-option [nzLabel]="'alert.priority.all' | i18n" [nzValue]="9"></nz-option>
            <nz-option [nzLabel]="'alert.priority.0' | i18n" [nzValue]="0"></nz-option>
            <nz-option [nzLabel]="'alert.priority.1' | i18n" [nzValue]="1"></nz-option>
            <nz-option [nzLabel]="'alert.priority.2' | i18n" [nzValue]="2"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="isLimit" nzSpan="7">{{ 'alert.notice.rule.period' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch
            (ngModelChange)="onNoticeRuleLimitChange(isLimit)"
            [(ngModel)]="isLimit"
            [nzCheckedChildren]="'alert.notice.rule.period.custom' | i18n"
            [nzUnCheckedChildren]="'alert.notice.rule.period.no-limit' | i18n"
            id="isLimit"
            name="isLimit"
          ></nz-switch>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="isLimit">
        <nz-form-label nzFor="days" nzSpan="7">{{ 'alert.notice.rule.period-chose' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-checkbox-group
            (ngModelChange)="onNoticeRuleDaysChange(dayCheckOptions)"
            [(ngModel)]="dayCheckOptions"
            id="days"
            name="days"
          ></nz-checkbox-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="time" nzSpan="7">{{ 'alert.notice.rule.time' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-time-picker [(ngModel)]="rule.periodStart" id="periodStart" name="periodStart" nzFormat="HH:mm"></nz-time-picker>
          <span nz-icon nzTheme="outline" nzType="right-circle" style="margin-right: 6px; margin-left: 6px"></span>
          <nz-time-picker [(ngModel)]="rule.periodEnd" id="periodEnd" name="periodEnd" nzFormat="HH:mm"></nz-time-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="enable" nzRequired="true" nzSpan="7">{{ 'alert.notice.rule.enable' | i18n }}</nz-form-label>
        <nz-form-control nzSpan="12">
          <nz-switch [(ngModel)]="rule.enable" id="enable" name="enable"></nz-switch>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>
<!-- 新增或修改通知媒介弹出框 -->
<nz-modal
  (nzOnCancel)="onManageReceiverModalCancel()"
  (nzOnOk)="onManageReceiverModalOk()"
  [(nzVisible)]="isManageReceiverModalVisible"
  [nzOkLoading]="isManageReceiverModalOkLoading"
  [nzTitle]="isManageReceiverModalAdd ? ('alert.notice.receiver.new' | i18n) : ('alert.notice.receiver.edit' | i18n)"
  nzMaskClosable="false"
  nzWidth="40%"
>
  <div *nzModalContent class="-inner-content">
    <form #receiverForm="ngForm" nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">{{ 'alert.notice.receiver.people.name' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.name" id="name" name="name" nz-input required type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="type" nzRequired="true" nzSpan="7">{{ 'alert.notice.receiver.type' | i18n }} </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" nzSpan="12">
          <nz-select [(ngModel)]="receiver.type" [nzOptionOverflowSize]="10" id="type" name="type" nzPlaceHolder="Choose" required>
            <nz-option [nzLabel]="'alert.notice.type.sms' | i18n" [nzValue]="0"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.email' | i18n" [nzValue]="1"></nz-option>
            <nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.discord' | i18n" [nzValue]="9"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.slack' | i18n" [nzValue]="8"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.wework' | i18n" [nzValue]="4"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.ding' | i18n" [nzValue]="5"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.fei-shu' | i18n" [nzValue]="6"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.telegram-bot' | i18n" [nzValue]="7"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.weChatApp' | i18n" [nzValue]="10"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.smn' | i18n" [nzValue]="11"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.serverchan' | i18n" [nzValue]="12"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.gotify' | i18n" [nzValue]="13"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 0">
        <nz-form-label [nzRequired]="receiver.type === 0" [nzSpan]="7" nzFor="phone">{{ 'alert.notice.type.phone' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.phone.invalid' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.phone" [required]="receiver.type === 0" id="phone" name="phone" nz-input type="tel" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 1">
        <nz-form-label [nzRequired]="receiver.type === 1" [nzSpan]="7" nzFor="email">{{ 'alert.notice.type.email' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.email.invalid' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.email" [required]="receiver.type === 1" email id="email" name="email" nz-input type="email" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 2">
        <nz-form-label [nzRequired]="receiver.type === 2" [nzSpan]="7" nzFor="hookUrl">{{ 'alert.notice.type.url' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.hookUrl" [required]="receiver.type === 2" id="hookUrl" name="hookUrl" nz-input type="url" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 3">
        <nz-form-label [nzRequired]="receiver.type === 3" [nzSpan]="7" nzFor="wechatId">{{
          'alert.notice.type.wechat-id' | i18n
        }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.wechatId" [required]="receiver.type === 3" name="wechatId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 4">
        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 4">{{
          'alert.notice.type.wework-key' | i18n
        }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input
            [(ngModel)]="receiver.wechatId"
            (ngModelChange)="onSplitTokenStr(4)"
            nz-input
            [required]="receiver.type === 4"
            name="wechatId"
            type="text"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 4">
        <nz-form-label [nzSpan]="7" nzFor="phone">{{ 'alert.notice.type.phone' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.phone.invalid' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.phone" pattern="^(1\d{10})(,\s*1\d{10})*$" id="WePhone" name="phone" nz-input type="tel" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 4">
        <nz-form-label [nzSpan]="7" nzFor="userId">{{ 'alert.notice.type.userId' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.userId" name="userId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 5">
        <nz-form-label [nzSpan]="7" nzFor="accessToken" [nzRequired]="receiver.type === 5">{{
          'alert.notice.type.access-token' | i18n
        }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input
            [(ngModel)]="receiver.accessToken"
            (ngModelChange)="onSplitTokenStr(5)"
            nz-input
            [required]="receiver.type === 5"
            name="accessToken"
            type="text"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 5">
        <nz-form-label [nzSpan]="7" nzFor="phone">{{ 'alert.notice.type.phone' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.phone.invalid' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.phone" name="phone" pattern="^(1\d{10})(,\s*1\d{10})*$" nz-input type="tel" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 5">
        <nz-form-label [nzSpan]="7" nzFor="userId">{{ 'alert.notice.type.userId' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.userId" name="userId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 6">
        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 6">{{
          'alert.notice.type.fei-shu-key' | i18n
        }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input
            [(ngModel)]="receiver.wechatId"
            (ngModelChange)="onSplitTokenStr(6)"
            nz-input
            [required]="receiver.type === 6"
            name="wechatId"
            type="text"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 6">
        <nz-form-label [nzSpan]="7" nzFor="userId">{{ 'alert.notice.type.userId' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.userId" name="userId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 7">
        <nz-form-label [nzRequired]="receiver.type === 7" [nzSpan]="7" nzFor="tgBotToken">{{
          'alert.notice.type.telegram-bot-token' | i18n
        }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="receiver.tgBotToken" nz-input [required]="receiver.type === 7" name="tgBotToken" type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 7">
        <nz-form-label [nzRequired]="receiver.type === 7" [nzSpan]="7" nzFor="tgUserId">{{
          'alert.notice.type.telegram-bot-user-id' | i18n
        }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.tgUserId" [required]="receiver.type === 7" name="tgUserId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 8">
        <nz-form-label [nzRequired]="receiver.type === 8" [nzSpan]="7" nzFor="slackWebHookUrl">{{
          'alert.notice.type.slack-webHook-url' | i18n
        }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.slackWebHookUrl" [required]="receiver.type === 8" name="slackWebHookUrl" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 9">
        <nz-form-label [nzRequired]="receiver.type === 9" [nzSpan]="7" nzFor="discordBotToken">{{
          'alert.notice.type.discord-bot-token' | i18n
        }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.discordBotToken" [required]="receiver.type === 9" name="discordBotToken" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 9">
        <nz-form-label [nzRequired]="receiver.type === 9" [nzSpan]="7" nzFor="discordChannelId">{{
          'alert.notice.type.discord-channel-id' | i18n
        }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.discordChannelId" [required]="receiver.type === 9" name="discordChannelId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 10">
        <nz-form-label [nzRequired]="receiver.type === 10" [nzSpan]="7" nzFor="corpId">
          {{ 'alert.notice.type.weChatApp-corpId' | i18n }}
        </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.corpId" [required]="receiver.type === 10" name="corpId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 10">
        <nz-form-label [nzRequired]="receiver.type === 10" [nzSpan]="7" nzFor="agentId">
          {{ 'alert.notice.type.weChatApp-agentId' | i18n }}
        </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.agentId" [required]="receiver.type === 10" name="agentId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 10">
        <nz-form-label [nzRequired]="receiver.type === 10" [nzSpan]="7" nzFor="appSecret">
          {{ 'alert.notice.type.weChatApp-appSecret' | i18n }}
        </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.appSecret" [required]="receiver.type === 10" name="appSecret" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 11">
        <nz-form-label [nzRequired]="receiver.type === 11" [nzSpan]="7" nzFor="smnAk">
          {{ 'alert.notice.type.smn-ak' | i18n }}
        </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.smnAk" [required]="receiver.type === 11" name="smnAk" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 11">
        <nz-form-label [nzRequired]="receiver.type === 11" [nzSpan]="7" nzFor="smnSk">
          {{ 'alert.notice.type.smn-sk' | i18n }}
        </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.smnSk" [required]="receiver.type === 11" name="smnSk" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 11">
        <nz-form-label [nzRequired]="receiver.type === 11" [nzSpan]="7" nzFor="smnProjectId">
          {{ 'alert.notice.type.smn-projectId' | i18n }}
        </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.smnProjectId" [required]="receiver.type === 11" name="smnProjectId" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 11">
        <nz-form-label [nzRequired]="receiver.type === 11" [nzSpan]="7" nzFor="smnRegion">
          {{ 'alert.notice.type.smn-region' | i18n }}
        </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.smnRegion" [required]="receiver.type === 11" name="smnRegion" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 11">
        <nz-form-label [nzRequired]="receiver.type === 11" [nzSpan]="7" nzFor="smnTopicUrn">
          {{ 'alert.notice.type.smn-topicUrn' | i18n }}
        </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.smnTopicUrn" [required]="receiver.type === 11" name="smnTopicUrn" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 12">
        <nz-form-label [nzRequired]="receiver.type === 12" [nzSpan]="7" nzFor="serverChanToken">{{
          'alert.notice.type.serverchan-token' | i18n
        }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.serverChanToken" [required]="receiver.type === 12" name="serverChanToken" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 13">
        <nz-form-label [nzRequired]="receiver.type === 13" [nzSpan]="7" nzFor="gotifyToken">{{
          'alert.notice.type.gotify-token' | i18n
        }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="12">
          <input [(ngModel)]="receiver.gotifyToken" [required]="receiver.type === 13" name="gotifyToken" nz-input type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzOffset]="7" [nzSpan]="12">
          <button (click)="onSendAlertTestMsg()" [nzLoading]="isSendTestButtonLoading" nz-button nzDanger nzType="primary">
            <i nz-icon nzTheme="outline" nzType="send"></i>
            {{ 'alert.notice.send-test' | i18n }}
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>
<!-- 新增或修改通知模板弹出框 -->
<nz-modal
  (nzOnCancel)="onManageTemplateModalCancel()"
  (nzOnOk)="onManageTemplateModalOk()"
  [(nzVisible)]="isManageTemplateModalVisible"
  [nzOkLoading]="isManageTemplateModalOkLoading"
  [nzTitle]="isManageTemplateModalAdd ? ('alert.notice.template.new' | i18n) : ('alert.notice.template.edit' | i18n)"
  nzMaskClosable="false"
  nzWidth="45%"
>
  <div *nzModalContent class="-inner-content">
    <form #templateForm="ngForm" nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzFor="template_name" nzRequired="true">{{ 'alert.notice.template.name' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="18">
          <input [(ngModel)]="template.name" id="template_name" name="template_name" nz-input required type="text" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFor="type" nzRequired="true" nzSpan="4">{{ 'alert.notice.receiver.type' | i18n }} </nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" nzSpan="18">
          <nz-select [(ngModel)]="template.type" [nzOptionOverflowSize]="10" id="type1" name="type" nzPlaceHolder="Choose" required>
            <nz-option [nzLabel]="'alert.notice.type.sms' | i18n" [nzValue]="0"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.email' | i18n" [nzValue]="1"></nz-option>
            <nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.discord' | i18n" [nzValue]="9"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.slack' | i18n" [nzValue]="8"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.wework' | i18n" [nzValue]="4"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.ding' | i18n" [nzValue]="5"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.fei-shu' | i18n" [nzValue]="6"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.telegram' | i18n" [nzValue]="7"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.weChatApp' | i18n" [nzValue]="10"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.smn' | i18n" [nzValue]="11"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.serverchan' | i18n" [nzValue]="12"></nz-option>
            <nz-option [nzLabel]="'alert.notice.type.gotify' | i18n" [nzValue]="13"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" nzFor="template_content" nzRequired="true">{{ 'alert.notice.template.content' | i18n }}</nz-form-label>
        <nz-form-control [nzErrorTip]="'validation.required' | i18n" [nzSpan]="18">
          <textarea
            [(ngModel)]="template.content"
            id="template_content"
            name="template_content"
            nz-input
            required
            style="white-space: nowrap; height: 200px"
            type="textarea"
          ></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>

<!-- 通知模板示例弹出框 -->
<nz-modal
  (nzOnCancel)="onManageTemplateModalCancel()"
  [(nzVisible)]="isShowTemplateModalVisible"
  [nzTitle]="'alert.notice.template.content' | i18n"
  [nzCancelText]="'common.button.return' | i18n"
  [nzOkText]="null"
  nzMaskClosable="false"
  nzWidth="40%"
>
  <div *nzModalContent class="-inner-content">
    <textarea
      [(ngModel)]="template.content"
      id="template_content_example"
      name="template_content"
      style="white-space: nowrap; overflow: scroll; width: 100%; height: 200px"
      type="textarea"
    ></textarea>
  </div>
</nz-modal>
